<template>
  <el-dialog
    v-model="visible"
    title="生成SKU"
    width="500"
    draggable
    @close="close"
    :z-index="2000"
  >
    <template #default>
      <el-table :data="tableData" height="400" border>
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="spu" label="SPU" width="110"> </el-table-column>
        <el-table-column prop="SKU" label="SKU" width="100">
          <template #default="{ row }">
            <span class="cursor-pointer text-[#3487ff]" @click="handleView(row)">
              {{ row.sku }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="SKU" label="产品名称">
          <template #default="{ row }">
            <vText :value="row.sku_cn_title"></vText>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer>
      <el-button @click="close">关闭</el-button>
    </template>
  </el-dialog>
</template>
<script setup name="GenerateSKU">
import { reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

const router = useRouter();

const data = reactive({
  tableData: [],
  visible: false,
  loading: false,
  formRef: null,
});
const { visible, loading, formRef, tableData } = toRefs(data);
const open = (sku_list) => {
  tableData.value = sku_list;
  visible.value = true;
};

// 查看
const handleView = (row) => {
  router.push({
    path: "/task/product/detail",
    query: {
      spuId: row.spu_id,
      sku: row.sku,
    },
  });
  close();
};
const close = () => {
  visible.value = false;
};
defineExpose({ open });
</script>
